<template>
    <div class="chat-container">
        <div class="chat-item" v-for="(c, ci) in chatList" :key="c.id">
            <!-- 对话内容框 -->
            <div class="item-wrap" :class="[c.isUser ? 'flex-reserve' : '']">
                <!-- 头像 -->
                <div class="img">
                    <img :src="c.avatar" alt="">
                </div>
                <!-- 时间和信息内容 -->
                <div class="info-wrap">
                    <div class="info" :class="[c.isUser ? 'userBox' : 'aiBox']">
                        {{ c.isNew ? aiTest : c.content }}
                    </div>
                    <div class="time" :style="`text-align:${c.isUser ? 'right' : 'left'}`">
                        {{ c.time }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { mapActions, mapMutations, mapState } from "vuex"
export default {

    data() {
        return {
            aiTest: '',
            aiTetsIndex: 0,
            contentDetail: [
                {
                    id: 1,
                    name: '张三',
                    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
                    time: '2018-08-15 10:10:10',
                    content: '你好，我是小明',
                    isUser: true
                },
                {
                    id: 2,
                    name: '李四',
                    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
                    time: '2018-08-15 10:10:10',
                    content: `你好，我是小红`
                }
            ]
        }
    },
    methods: {
        ...mapActions('chat', ['getChatList']),
        writeType() {
            const testItem = this.chatList[this.chatList.length - 1]
            if (this.aiTetsIndex < testItem.content.length) {
                this.aiTest += testItem.content.charAt(this.aiTetsIndex)
                this.aiTetsIndex++
                setTimeout(() => {
                    this.writeType()
                }, 50);
            }
        },
    },
    computed: {
        ...mapState('chat', ['chatList'])
    },
    watch: {
        chatList: {
            handler(val) {
                this.aiTetsIndex = 0
                this.aiTest = ''
                this.writeType()
            },
            deep: true
        }
    },
    mounted() {
        this.getChatList()
    }

}

</script>

<style scoped lang="scss">
.chat-container {
    display: flex;
    flex-direction: column;
}

.item-wrap {
    display: flex;
    margin-bottom: 10px;
    img {

        width: 32px;
        height: 32px;
        border-radius: 50%;
    }

    .info-wrap {
        display: flex;
        flex-direction: column;
        
        margin-left: 10px;
      
        .time {
            margin-bottom: 10px;
            font-size: 12px;
            color: #999;
            flex: 0 0 auto;
        }

        .info {
            // max-width: 94%;
            flex: 0 0 auto;
            padding: 10px;
            border-radius: 10px;
        }

    }
    .info-wrap > div {
        flex: 0 0 auto;
    }


}

.flex-reserve {
    flex-direction: row-reverse;

    .info-wrap {
        margin-right: 10px;
    }
}

.userBox {
    background-color: rgb(210 249 209 / 1);
}

.aiBox {
    background-color: rgb(244 246 248 / 1);
}
</style>